import React from "react";
import { useNavigate } from "react-router-dom";
import { createForm } from "@formily/core";
import { createSchemaField, ISchema } from "@formily/react";
import api from "src/http/api";

import {
  Form,
  FormItem,
  Input,
  Password,
  Submit,
  FormGrid,
  FormProps,
} from "@formily/antd";
import { Typography, notification } from "antd";
import UserInfo from ".";
import AvatarUpload from "src/components/AvatarUpload";

const SignUp: React.FC = (props) => {
  const navigate = useNavigate();
  const form = createForm();
  const SchemaField = createSchemaField({
    components: {
      FormItem,
      FormGrid,
      Input,
      Password,
      AvatarUpload,
    },
  });

  const formProps: FormProps = {
    form,
    layout: "vertical",
    size: "large",
    style: { width: 550, padding: "24px 48px" },
    onAutoSubmit: (formData) => {
      const avatar = formData.avatar[0].response.data.url;
      api.signUp({ ...formData, avatar }).then(() => {
        navigate("/login");
        notification.success({
          message: "Success",
          description: "注册用户成功",
        });
      });
    },
  };

  const schema: ISchema = {
    type: "object",
    properties: {
      formGrid: {
        type: "void",
        "x-component": "FormGrid",
        "x-component-props": {
          maxColumns: 2,
          minColumns: 2,
          columnGap: 32,
        },
        properties: {
          username: {
            type: "string",
            title: "用户名",
            required: true,
            "x-decorator": "FormItem",
            "x-component": "Input",
          },
          email: {
            type: "string",
            title: "邮箱",
            required: true,
            format: "email",
            "x-decorator": "FormItem",
            "x-component": "Input",
          },
          password: {
            type: "string",
            title: "密码",
            required: true,
            "x-decorator": "FormItem",
            "x-component": "Password",
            "x-component-props": { checkStrength: true },
            "x-reactions": (field) => {
              const confirmPassword = field.query(".confirmPassword").value();
              field.selfErrors =
                field.value() &&
                confirmPassword &&
                field.value() !== confirmPassword
                  ? "确认密码不匹配"
                  : "";
            },
          },
          confirmPassword: {
            type: "string",
            title: "确认密码",
            required: true,
            "x-decorator": "FormItem",
            "x-component": "Password",
            "x-component-props": { checkStrength: true },
            "x-reactions": (field) => {
              const password = field.query(".password").value();
              field.selfErrors =
                field.value() && password && field.value() !== password
                  ? "确认密码不匹配"
                  : "";
            },
          },
          avatar: {
            type: "array",
            title: "头像",
            required: true,
            "x-decorator": "FormItem",
            "x-component": "AvatarUpload",
          },
        },
      },
    },
  };

  return (
    <UserInfo>
      <Form {...formProps}>
        <Typography.Title level={2}>注册</Typography.Title>
        <SchemaField schema={schema} />
        <Submit block size="large">
          注册
        </Submit>
      </Form>
    </UserInfo>
  );
};

export default SignUp;
